Rendering Lists
Rendering lists is one of the most common things that we do in basically all React applications. You will probably do it like 100 times throughout this lectures and so let’s now learn how to render lists in React. But first of all, what do we actually mean by rendering lists?
Well, basically rendering a list is when we have an array and we want to create one component for each element of the array.
So for example, here we have all starter data, remember? So here we have an array of these objects where each object is one pizza. And so as you can imagine, now we want to basically render this list. So basically we want to take this array, and for each of these pizza objects, we want to automatically create one pizza component here in our user interface. So instead of calling or of using here the pizza component manually one by one, we want to do it all at once dynamically.
So if we have like four pizzas in the array, then we want four components to be rendered. But if we have like six or 10, then we want 10 components to show up here in our app. Okay, so let’s now learn how to do this.
Now, the beauty of React is that for many things, all we need really is the JavaScript knowledge that we already have. So for example, for rendering lists, there’s nothing new about React that we need to learn. So it doesn’t give us like a list element that we can use or something like this. All we need is the JavaScript knowledge that we already have. And in this case, all we need is the map method. So let me show you how after all this talk.
So let’s create a new div here and later we will convert this to an actual list element but let’s just start out with any element here. It doesn’t really matter which one. And for starters, let’s also comment out this code right here and maybe you noticed here by the way, that a comment in JSX is simply again entering JavaScript mode so with these curly braces and then this is just a JavaScript comment. So this is one of the rules of JSX that was actually in one of the slides or actually in the only slide in the previous lecture.
So if you read that, then you’re already familiar with this. But anyway, let’s now render our pizza list. Let’s remember, yeah, it’s called pizza data. So let’s enter JavaScript mode here and then let’s take our pizza data, which remember is just an array. And then let’s map over it. So at map, we basically loop over this array and create a brand new array. So in this pizza data, each element is a pizza. So let’s do this and what we want in this new array, so in the new array that will be the result of map is for each pizza, a pizza component. And now we can simply pass all of these props in dynamically here. Let’s first close it like this. So we can now say pizza. and I think it is name, but let’s check. Yeah, so we have name, ingredients, price, photo data and even this other property.
So if I give it a save right now, we should already see the six components over there and indeed, beautiful. There they are. They’re missing here the image and the prices I guess. But in principle, it’s already working. So you see here that we now get these console.logs here for each of the pizzas, exactly what the names we have here. And so now we are effectively already rendering a list. So a list based on this pizza data. Now we could keep going here and basically add another property now for the photo name for example. So we can do pizza.photoname and so on and so forth.
But usually this is not how we do it. Usually what we do is to pass in the entire object into the more specific component, so that’s pizza in this case, and then inside of that component, we would then take the information that we want out of the object. So let’s now change the way we pass props into this pizza and simply pass pizza and let’s maybe say pizza object just to make it slightly less confusing and then or JavaScript mode and then the current pizza object. All right and now it all breaks here because we need to adapt, of course, our pizza. So now here we have props.pizzaobject.photoname, right?